JavaScript: The Definitive Guide by David Flanagan

Author:David Flanagan [David Flanagan]
Language: eng
Format: epub, pdf
Tags: COMPUTERS / Programming Languages / JavaScript
ISBN: 9781449302122
Publisher: O'Reilly Media
Published: 2011-04-18T16:00:00+00:00

The animation properties object

The first argument to animate() must be an object. The property names for this object must be CSS attribute names, and the values of those properties must be the target values toward which the animation will move. Only numeric properties can be animated: it is not possible to animate colors, fonts, or enumerated properties such as display. If the value of a property is a number, pixels are assumed. If the value is a string, you may specify units. If you omit the units, pixels are again assumed. To specify relative values, prefix the value string with “+=” to increase the value or with “-=” to decrease the value. For example:

$("p").animate({ "margin-left": "+=.5in", // Increase paragraph indent opacity: "-=.1" // And decrease their opacity });

Note the use of the quotes around the property name “margin-left” in the object literal above. The hyphen in this property name means that it is not a legal JavaScript identifier, so it must be quoted here. jQuery also allows you to use the mixed-case alternative marginLeft, of course.

In addition to numeric values (with optional units and “+=” and “-=” prefixes), there are three other values that can be used in jQuery animation objects. The value “hide” will save the current state of the property and then animate that property toward 0. The value “show” will animate a CSS property toward its saved value. If an animation uses “show”, jQuery will call the show() method when the animation completes. And if an animation uses “hide”, jQuery will call hide() when the animation completes. You can also use the value “toggle” to perform either a show or a hide, depending on the current setting of the attribute. You can produce a “slideRight” effect (like the slideUp() method, but animating element width) like this:

$("img").animate({ width: "hide", borderLeft: "hide", borderRight: "hide", paddingLeft: "hide", paddingRight: "hide" });

Replace the property values with “show” or “toggle” to produce sideways slide effects analogous to slideDown() and slideToggle().

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.